<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟DR操作界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #1a6bc4 0%, #0d4d9c 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .main-content {
            display: flex;
            gap: 20px;
        }
        
        .panel {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .left-panel {
            flex: 1;
            max-width: 300px;
        }
        
        .right-panel {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .section-title {
            font-size: 18px;
            color: #1a6bc4;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #eaeaea;
        }
        
        .body-regions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .region-btn {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .region-btn:hover {
            background: #e9ecef;
            border-color: #1a6bc4;
        }
        
        .region-btn.active {
            background: #1a6bc4;
            color: white;
            border-color: #1a6bc4;
        }
        
        .positions-list {
            max-height: 400px;
            overflow-y: auto;
            margin-bottom: 20px;
        }
        
        .position-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .position-item:hover {
            background: #f8f9fa;
        }
        
        .position-item.active {
            background: #e3f2fd;
            border-left: 4px solid #1a6bc4;
        }
        
        .position-details {
            margin-top: 15px;
        }
        
        .detail-item {
            margin-bottom: 12px;
        }
        
        .detail-label {
            font-weight: bold;
            color: #555;
            margin-bottom: 5px;
        }
        
        .detail-value {
            color: #333;
        }
        
        .image-display {
            background: #2c3e50;
            border-radius: 8px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
        }
        
        .image-display img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .exposure-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .exposure-btn {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 12px 30px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .exposure-btn:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }
        
        .exposure-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }
        
        .params-display {
            display: flex;
            gap: 20px;
        }
        
        .param {
            text-align: center;
        }
        
        .param-value {
            font-size: 20px;
            font-weight: bold;
            color: #1a6bc4;
        }
        
        .param-label {
            font-size: 14px;
            color: #666;
        }
        
        .status-bar {
            background: #2c3e50;
            color: white;
            padding: 10px 15px;
            border-radius: 6px;
            margin-top: 20px;
            font-size: 14px;
        }
        
        .technique-guide {
            background: #fff9e6;
            border-left: 4px solid #ffc107;
            padding: 15px;
            border-radius: 6px;
            margin-top: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .technique-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #e67e22;
        }
        
        .anatomy-explanation {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
            padding: 15px;
            border-radius: 6px;
            margin-top: 20px;
        }
        
        .anatomy-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #2e7d32;
        }
        
        .loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
        }
        
        .exposure-sound {
            display: none;
        }
        
        .image-placeholder {
            text-align: center;
            padding: 20px;
        }

        .demo-image {
            width: 200px;
            height: 150px;
            background: #34495e;
            margin: 10px auto;
            border: 2px dashed #7f8c8d;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #bdc3c7;
        }
        
        .disclaimer {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            font-size: 12px;
            color: #856404;
            line-height: 1.4;
        }
        
        .developer-info {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 12px;
            opacity: 0.8;
        }

        .footer {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background: #ecf0f1;
            border-radius: 8px;
            font-size: 12px;
            color: #7f8c8d;
        }
        
        @media (max-width: 1024px) {
            .main-content {
                flex-direction: column;
            }
            
            .left-panel {
                max-width: 100%;
            }

             .developer-info {
                position: static;
                text-align: center;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>模拟DR操作界面</h1>
            <p style="text-align: center;">全身各部位、关节多角度摄影系统</p>
            <div class="developer-info">
                👨‍⚕️ 开发者：医影小白 | 📚 仅学习分享
            </div>
        </header>
        
        <div class="disclaimer">
            <strong>⚠️ 免责声明：</strong>
            本系统为医学影像学习模拟软件，仅供教学和培训使用。所有内容不能替代专业医疗诊断和治疗建议。
            使用者应咨询合格医疗专业人员获取具体医疗建议。开发者不对因使用本系统而产生的任何医疗问题负责。
        </div>

        <div class="main-content">
            <div class="panel left-panel">
                <h2 class="section-title">摄影部位选择</h2>
                
                <div class="body-regions">
                    <div class="region-btn active" data-region="head">头颅</div>
                    <div class="region-btn" data-region="spine">脊柱</div>
                    <div class="region-btn" data-region="chest">胸部</div>
                    <div class="region-btn" data-region="abdomen">腹部</div>
                    <div class="region-btn" data-region="pelvis">骨盆</div>
                    <div class="region-btn" data-region="upper-limb">上肢</div>
                    <div class="region-btn" data-region="lower-limb">下肢</div>
                </div>
                
                <h2 class="section-title">摄影体位</h2>
                <div class="positions-list" id="positions-list">
                    <!-- 体位列表将通过JavaScript动态生成 -->
                </div>
                
                <div class="position-details">
                    <h2 class="section-title">摄影参数</h2>
                    <div class="detail-item">
                        <div class="detail-label">KV</div>
                        <div class="detail-value" id="kv-value">70</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">mAs</div>
                        <div class="detail-value" id="mas-value">16</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">SID</div>
                        <div class="detail-value" id="sid-value">100 cm</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">中心线</div>
                        <div class="detail-value" id="centerline-value">垂直对准探测器中心</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">摄影范围</div>
                        <div class="detail-value" id="coverage-value">全脊柱</div>
                    </div>
                </div>
            </div>
            
            <div class="panel right-panel">
                <div class="image-display" id="image-display">
                    <div class="image-placeholder" id="position-design">
                        <h3>体位设计示意图</h3>
                        <p>请选择摄影体位查看体位设计</p>
                    </div>
                    <img id="xray-image" style="display: none;" alt="X光影像">
                    <div class="loading" id="loading">曝光中...</div>
                </div>
                
                <div class="exposure-controls">
                    <div class="params-display">
                        <div class="param">
                            <div class="param-value" id="display-kv">70</div>
                            <div class="param-label">KV</div>
                        </div>
                        <div class="param">
                            <div class="param-value" id="display-mas">16</div>
                            <div class="param-label">mAs</div>
                        </div>
                        <div class="param">
                            <div class="param-value" id="display-sid">100</div>
                            <div class="param-label">SID(cm)</div>
                        </div>
                    </div>
                    
                    <button class="exposure-btn" id="exposure-btn">
                        <span>模拟曝光</span>
                    </button>
                </div>
                
                <div class="technique-guide">
                    <div class="technique-title">摄影指导</div>
                    <div id="technique-text">请选择摄影体位查看摄影指导</div>
                </div>
                
                <div class="anatomy-explanation">
                    <div class="anatomy-title">解剖部位解释</div>
                    <div id="anatomy-text">请选择摄影体位查看解剖部位解释</div>
                </div>
                
                <div class="status-bar">
                    <div id="status-text">系统就绪 - 请选择摄影体位</div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>📖 <strong>学习目的说明：</strong>本系统旨在帮助医学影像学习者理解DR摄影技术，包括体位设计、参数设置和影像评估。</p>
            <p>🚫 <strong>非医疗设备：</strong>本模拟系统不能用于实际医疗诊断，所有操作参数仅供参考学习。</p>
            <p>👨‍⚕️ <strong>开发者：医影小白</strong> | 🎯 <strong>用途：医学影像学习分享</strong> | 📅 版本 1.0</p>
        </div>
    </div>
    
    <audio class="exposure-sound" id="exposure-sound" src="sounds\exposure-sound.mp3.wav"></audio>
    
    <script>
        // 开发者信息
        console.log('🎯 DR模拟系统 - 开发者：医影小白');
        console.log('📚 用途：医学影像学习分享');
        console.log('⚠️ 免责声明：本系统仅供学习使用，不能替代专业医疗诊断');
        // 体位数据 - 使用本地图片路径
        const positionsData = {
            head: [
                {
                    name: "头颅正位",
                    kv: 70,
                    mas: 20,
                    sid: 100,
                    centerline: "垂直对准眉间与枕外粗隆连线中点",
                    coverage: "包括全部颅骨",
                    technique: "患者仰卧，头部正中矢状面垂直台面，听眦线垂直台面，中心线垂直对准眉间与枕外粗隆连线中点。",
                    anatomy: "头颅正位可显示颅骨整体形态、颅腔大小、颅缝、蝶鞍、眼眶等结构。",
                    designImage: "images/positions/design/head-ap-design.jpg",
                    xrayImage: "images/positions/xray/head-ap-xray.jpg"
                },
                {
                    name: "头颅侧位",
                    kv: 70,
                    mas: 20,
                    sid: 100,
                    centerline: "垂直对准外耳孔前上方2.5cm处",
                    coverage: "包括全部颅骨",
                    technique: "患者俯卧，头部侧转，矢状面与台面平行，瞳间线垂直台面，中心线垂直对准外耳孔前上方2.5cm处。",
                    anatomy: "头颅侧位可显示颅骨侧位形态、蝶鞍、颅底、颅缝、下颌骨等结构。",
                    designImage: "images/positions/design/head-lat-design.jpg",
                    xrayImage: "images/positions/xray/head-lat-xray.jpg"
                },
                {
                    name: "头颅切线位",
                    kv: 65,
                    mas: 16,
                    sid: 100,
                    centerline: "切线方向对准病变部位",
                    coverage: "病变局部区域",
                    technique: "根据病变位置调整头部角度，使病变部位与X线呈切线关系，中心线垂直对准病变部位。",
                    anatomy: "头颅切线位用于显示颅骨表面病变、凹陷性骨折、骨瘤等表面结构异常。",
                    designImage: "images/positions/design/skull-tangential-design.jpg",
                    xrayImage: "images/positions/xray/skull-tangential-xray.jpg"
                },
                {
                    name: "鼻骨侧位",
                    kv: 55,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准鼻根部",
                    coverage: "包括鼻骨及周围软组织",
                    technique: "患者俯卧，头部侧转，矢状面与台面平行，中心线垂直对准鼻根部。",
                    anatomy: "鼻骨侧位可清晰显示鼻骨的侧位形态，用于诊断鼻骨骨折。",
                    designImage: "images/positions/design/nasal-bone-lat-design.jpg",
                    xrayImage: "images/positions/xray/nasal-bone-lat-xray.jpg"
                },
                {
                    name: "下颌骨正位",
                    kv: 65,
                    mas: 16,
                    sid: 100,
                    centerline: "垂直对准下颌骨体部中点",
                    coverage: "包括全部下颌骨",
                    technique: "患者仰卧，头部后仰，使下颌骨与台面平行，中心线垂直对准下颌骨体部中点。",
                    anatomy: "下颌骨正位可显示下颌骨整体形态、下颌支、髁状突、颏部等结构。",
                    designImage: "images/positions/design/mandible-ap-design.jpg",
                    xrayImage: "images/positions/xray/mandible-ap-xray.jpg"
                },
                {
                    name: "下颌骨侧位",
                    kv: 65,
                    mas: 16,
                    sid: 100,
                    centerline: "对准对侧下颌角下方",
                    coverage: "单侧下颌骨",
                    technique: "患者俯卧，头部侧转，被检侧下颌骨贴近台面，中心线向头侧倾斜15-20度，对准对侧下颌角下方。",
                    anatomy: "下颌骨侧位可显示单侧下颌骨体部、下颌支、髁状突、冠突等结构。",
                    designImage: "images/positions/design/mandible-lat-design.jpg",
                    xrayImage: "images/positions/xray/mandible-lat-xray.jpg"
                }
            ],
            spine: [
                {
                    name: "颈椎正位",
                    kv: 65,
                    mas: 16,
                    sid: 100,
                    centerline: "垂直对准第4颈椎",
                    coverage: "包括C1-T1椎体",
                    technique: "患者站立或仰卧，头部后仰，听鼻线平行台面，中心线垂直对准第4颈椎。",
                    anatomy: "颈椎正位可显示颈椎椎体、椎间隙、钩椎关节、横突等结构。",
                    designImage: "images/positions/design/cervical-ap-design.jpg",
                    xrayImage: "images/positions/xray/cervical-ap-xray.jpg"
                },
                {
                    name: "颈椎侧位",
                    kv: 65,
                    mas: 20,
                    sid: 150,
                    centerline: "水平对准第4颈椎",
                    coverage: "包括C1-T1椎体",
                    technique: "患者侧立，肩部尽量下垂，头部保持自然姿势，中心线水平对准第4颈椎。",
                    anatomy: "颈椎侧位可显示颈椎生理曲度、椎体序列、椎间隙、椎间孔等结构。",
                    designImage: "images/positions/design/cervical-lat-design.jpg",
                    xrayImage: "images/positions/xray/cervical-lat-xray.jpg"
                },
                {
                    name: "颈椎双斜位",
                    kv: 65,
                    mas: 20,
                    sid: 100,
                    centerline: "向头侧倾斜15-20度，对准第4颈椎",
                    coverage: "单侧颈椎",
                    technique: "患者仰卧，身体旋转45度，中心线向头侧倾斜15-20度，对准第4颈椎。",
                    anatomy: "颈椎斜位可显示椎间孔、关节突关节、椎弓根等结构。",
                    designImage: "images/positions/design/cervical-oblique-design.jpg",
                    xrayImage: "images/positions/xray/cervical-oblique-xray.jpg"
                },
                {
                    name: "颈椎过伸过屈位",
                    kv: 65,
                    mas: 20,
                    sid: 150,
                    centerline: "水平对准第4颈椎",
                    coverage: "包括C1-T1椎体",
                    technique: "患者侧立，分别做最大限度的前屈和后伸动作，中心线水平对准第4颈椎。",
                    anatomy: "颈椎过伸过屈位用于评估颈椎稳定性、活动度和韧带损伤。",
                    designImage: "images/positions/design/cervical-flexion-design.jpg",
                    xrayImage: "images/positions/xray/cervical-flexion-xray.jpg"
                },
                {
                    name: "胸椎正位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准第6胸椎",
                    coverage: "包括T1-T12椎体",
                    technique: "患者仰卧，身体正中矢状面垂直台面，中心线垂直对准第6胸椎。",
                    anatomy: "胸椎正位可显示胸椎椎体、椎间隙、横突、肋骨等结构。",
                    designImage: "images/positions/design/thoracic-ap-design.jpg",
                    xrayImage: "images/positions/xray/thoracic-ap-xray.jpg"
                },
                {
                    name: "胸椎侧位",
                    kv: 80,
                    mas: 32,
                    sid: 100,
                    centerline: "垂直对准第6胸椎",
                    coverage: "包括T1-T12椎体",
                    technique: "患者侧卧，双臂上举抱头，身体正中矢状面平行台面，中心线垂直对准第6胸椎。",
                    anatomy: "胸椎侧位可显示胸椎生理曲度、椎体形态、椎间隙等结构。",
                    designImage: "images/positions/design/thoracic-lat-design.jpg",
                    xrayImage: "images/positions/xray/thoracic-lat-xray.jpg"
                },
                {
                    name: "腰椎正位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准第3腰椎",
                    coverage: "包括T12-S1椎体",
                    technique: "患者仰卧，身体正中矢状面垂直台面，双膝屈曲，中心线垂直对准第3腰椎。",
                    anatomy: "腰椎正位可显示腰椎椎体、椎间隙、横突、骶髂关节等结构。",
                    designImage: "images/positions/design/lumbar-ap-design.jpg",
                    xrayImage: "images/positions/xray/lumbar-ap-xray.jpg"
                },
                {
                    name: "腰椎侧位",
                    kv: 80,
                    mas: 32,
                    sid: 100,
                    centerline: "垂直对准第3腰椎",
                    coverage: "包括T12-S1椎体",
                    technique: "患者侧卧，双膝屈曲，身体正中矢状面平行台面，中心线垂直对准第3腰椎。",
                    anatomy: "腰椎侧位可显示腰椎生理曲度、椎体形态、椎间隙、椎间孔等结构。",
                    designImage: "images/positions/design/lumbar-lat-design.jpg",
                    xrayImage: "images/positions/xray/lumbar-lat-xray.jpg"
                },
                {
                    name: "腰椎双斜位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准第3腰椎",
                    coverage: "单侧腰椎",
                    technique: "患者仰卧，身体旋转45度，中心线垂直对准第3腰椎。",
                    anatomy: "腰椎斜位可显示椎弓峡部、关节突关节、椎间孔等结构，常用于诊断椎弓峡部裂。",
                    designImage: "images/positions/design/lumbar-oblique-design.jpg",
                    xrayImage: "images/positions/xray/lumbar-oblique-xray.jpg"
                },
                {
                    name: "腰椎过伸过屈位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准第3腰椎",
                    coverage: "包括T12-S1椎体",
                    technique: "患者侧卧，分别做最大限度的前屈和后伸动作，中心线垂直对准第3腰椎。",
                    anatomy: "腰椎过伸过屈位用于评估腰椎稳定性、活动度和椎体滑脱。",
                    designImage: "images/positions/design/lumbar-flexion-design.jpg",
                    xrayImage: "images/positions/xray/lumbar-flexion-xray.jpg"
                },
                {
                    name: "骶尾椎正位",
                    kv: 70,
                    mas: 20,
                    sid: 100,
                    centerline: "向头侧倾斜15度，对准耻骨联合上缘",
                    coverage: "包括骶骨和尾骨",
                    technique: "患者仰卧，中心线向头侧倾斜15度，对准耻骨联合上缘。",
                    anatomy: "骶尾椎正位可显示骶骨、尾骨整体形态、骶孔、骶髂关节等结构。",
                    designImage: "images/positions/design/sacrum-ap-design.jpg",
                    xrayImage: "images/positions/xray/sacrum-ap-xray.jpg"
                },
                {
                    name: "骶尾椎侧位",
                    kv: 70,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准骶骨中部",
                    coverage: "包括骶骨和尾骨",
                    technique: "患者侧卧，中心线垂直对准骶骨中部。",
                    anatomy: "骶尾椎侧位可显示骶骨曲度、骶尾关节、尾骨形态等结构。",
                    designImage: "images/positions/design/sacrum-lat-design.jpg",
                    xrayImage: "images/positions/xray/sacrum-lat-xray.jpg"
                },
                {
                    name: "骶髂关节轴位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "向头侧倾斜25-30度，对准骶骨中部",
                    coverage: "骶髂关节",
                    technique: "患者仰卧，中心线向头侧倾斜25-30度，对准骶骨中部。",
                    anatomy: "骶髂关节轴位可显示骶髂关节间隙、关节面等结构。",
                    designImage: "images/positions/design/sacroiliac-axial-design.jpg",
                    xrayImage: "images/positions/xray/sacroiliac-axial-xray.jpg"
                },
                {
                    name: "骶髂关节双斜位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准被检侧骶髂关节",
                    coverage: "单侧骶髂关节",
                    technique: "患者仰卧，身体向对侧旋转15-20度，中心线垂直对准被检侧骶髂关节。",
                    anatomy: "骶髂关节斜位可更清晰显示骶髂关节间隙和关节面。",
                    designImage: "images/positions/design/sacroiliac-oblique-design.jpg",
                    xrayImage: "images/positions/xray/sacroiliac-oblique-xray.jpg"
                }
            ],
            chest: [
                {
                    name: "胸部正位",
                    kv: 80,
                    mas: 8,
                    sid: 180,
                    centerline: "水平对准第5胸椎",
                    coverage: "包括肺尖至膈肌",
                    technique: "患者站立，前胸贴近探测器，下颌稍仰，双手叉腰，中心线水平对准第5胸椎。",
                    anatomy: "胸部正位可显示肺野、心脏大血管、纵隔、膈肌、胸廓等结构。",
                    designImage: "images/positions/design/chest-ap-design.jpg",
                    xrayImage: "images/positions/xray/chest-ap-xray.jpg"
                },
                {
                    name: "胸部侧位",
                    kv: 85,
                    mas: 12,
                    sid: 180,
                    centerline: "水平对准第5胸椎水平的腋中线",
                    coverage: "包括肺尖至膈肌",
                    technique: "患者侧立，被检侧贴近探测器，双臂上举，中心线水平对准第5胸椎水平的腋中线。",
                    anatomy: "胸部侧位可显示肺叶前后分布、心脏前后径、胸骨、胸椎等结构。",
                    designImage: "images/positions/design/chest-lat-design.jpg",
                    xrayImage: "images/positions/xray/chest-lat-xray.jpg"
                }
            ],
            abdomen: [
                {
                    name: "腹部站立正位",
                    kv: 75,
                    mas: 32,
                    sid: 100,
                    centerline: "水平对准剑突与耻骨联合连线中点",
                    coverage: "包括膈肌至耻骨联合",
                    technique: "患者站立，腹部贴近探测器，中心线水平对准剑突与耻骨联合连线中点。",
                    anatomy: "腹部站立正位可显示胃肠道气体分布、膈下游离气体、肠梗阻、腹部钙化等。",
                    designImage: "images/positions/design/abdomen-standing-design.jpg",
                    xrayImage: "images/positions/xray/abdomen-standing-xray.jpg"
                },
                {
                    name: "腹部仰卧正位",
                    kv: 75,
                    mas: 32,
                    sid: 100,
                    centerline: "垂直对准剑突与耻骨联合连线中点",
                    coverage: "包括膈肌至耻骨联合",
                    technique: "患者仰卧，身体正中矢状面垂直台面，中心线垂直对准剑突与耻骨联合连线中点。",
                    anatomy: "腹部仰卧正位可显示腹部脏器大致位置、肠道气体分布、腹部钙化等。",
                    designImage: "images/positions/design/abdomen-supine-design.jpg",
                    xrayImage: "images/positions/xray/abdomen-supine-xray.jpg"
                }
            ],
            pelvis: [
                {
                    name: "骨盆正位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "垂直对准两侧髂前上棘连线中点下方3cm处",
                    coverage: "包括全部骨盆及髋关节",
                    technique: "患者仰卧，身体正中矢状面垂直台面，双下肢伸直，中心线垂直对准两侧髂前上棘连线中点下方3cm处。",
                    anatomy: "骨盆正位可显示骨盆环、髋臼、股骨头、骶髂关节、耻骨联合等结构。",
                    designImage: "images/positions/design/pelvis-ap-design.jpg",
                    xrayImage: "images/positions/xray/pelvis-ap-xray.jpg"
                },
                {
                    name: "骨盆出口位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "向头侧倾斜30-40度，对准耻骨联合",
                    coverage: "骨盆出口",
                    technique: "患者仰卧，中心线向头侧倾斜30-40度，对准耻骨联合。",
                    anatomy: "骨盆出口位可显示耻骨支、坐骨支、耻骨联合等前环结构。",
                    designImage: "images/positions/design/pelvis-outlet-design.jpg",
                    xrayImage: "images/positions/xray/pelvis-outlet-xray.jpg"
                },
                {
                    name: "骨盆入口位",
                    kv: 75,
                    mas: 25,
                    sid: 100,
                    centerline: "向足侧倾斜30-40度，对准髂前上棘连线中点",
                    coverage: "骨盆入口",
                    technique: "患者仰卧，中心线向足侧倾斜30-40度，对准髂前上棘连线中点。",
                    anatomy: "骨盆入口位可显示骶骨翼、骶髂关节、耻骨支等骨盆环结构。",
                    designImage: "images/positions/design/pelvis-inlet-design.jpg",
                    xrayImage: "images/positions/xray/pelvis-inlet-xray.jpg"
                },
                {
                    name: "髋关节外展内旋位",
                    kv: 70,
                    mas: 20,
                    sid: 100,
                    centerline: "垂直对准被检侧髋关节",
                    coverage: "单侧髋关节",
                    technique: "患者仰卧，被检侧髋关节外展并内旋，中心线垂直对准被检侧髋关节。",
                    anatomy: "髋关节外展内旋位可显示股骨头、股骨颈、大转子等结构。",
                    designImage: "images/positions/design/hip-abduction-design.jpg",
                    xrayImage: "images/positions/xray/hip-abduction-xray.jpg"
                },
                {
                    name: "髋关节蛙式位",
                    kv: 70,
                    mas: 20,
                    sid: 100,
                    centerline: "垂直对准被检侧髋关节",
                    coverage: "双侧髋关节",
                    technique: "患者仰卧，双膝屈曲，双足底相对，双髋外展外旋，中心线垂直对准被检侧髋关节。",
                    anatomy: "髋关节蛙式位可显示股骨头、股骨颈、髋臼等结构，常用于儿童髋关节检查。",
                    designImage: "images/positions/design/hip-frog-design.jpg",
                    xrayImage: "images/positions/xray/hip-frog-xray.jpg"
                }
            ],
            "upper-limb": [
                {
                    name: "肩关节正位",
                    kv: 60,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准喙突",
                    coverage: "包括肩关节及肱骨上段",
                    technique: "患者站立，被检侧肩部贴近探测器，身体向对侧旋转15-20度，中心线垂直对准喙突。",
                    anatomy: "肩关节正位可显示肩关节间隙、肱骨头、肩峰、锁骨远端等结构。",
                    designImage: "images/positions/design/shoulder-ap-design.jpg",
                    xrayImage: "images/positions/xray/shoulder-ap-xray.jpg"
                },
                {
                    name: "肩关节侧位",
                    kv: 60,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准肩关节",
                    coverage: "单侧肩关节",
                    technique: "患者侧立，被检侧肩部贴近探测器，中心线垂直对准肩关节。",
                    anatomy: "肩关节侧位可显示肱骨与肩胛骨的侧位关系。",
                    designImage: "images/positions/design/shoulder-lat-design.jpg",
                    xrayImage: "images/positions/xray/shoulder-lat-xray.jpg"
                },
                {
                    name: "肩关节Y形位",
                    kv: 60,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准肩关节",
                    coverage: "单侧肩关节",
                    technique: "患者站立，被检侧肩部贴近探测器，身体向对侧旋转45-60度，中心线垂直对准肩关节。",
                    anatomy: "肩关节Y形位可显示肩峰、喙突和肩胛盂形成的Y形结构，用于评估肩关节脱位。",
                    designImage: "images/positions/design/shoulder-y-design.jpg",
                    xrayImage: "images/positions/xray/shoulder-y-xray.jpg"
                },
                {
                    name: "肱骨正位",
                    kv: 60,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准肱骨中点",
                    coverage: "包括肩关节至肘关节",
                    technique: "患者站立，被检侧上臂贴近探测器，掌心向前，中心线垂直对准肱骨中点。",
                    anatomy: "肱骨正位可显示肱骨全长、肱骨头、外科颈、骨干等结构。",
                    designImage: "images/positions/design/humerus-ap-design.jpg",
                    xrayImage: "images/positions/xray/humerus-ap-xray.jpg"
                },
                {
                    name: "肱骨侧位",
                    kv: 60,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准肱骨中点",
                    coverage: "包括肩关节至肘关节",
                    technique: "患者站立，被检侧上臂外展，肘关节屈曲90度，中心线垂直对准肱骨中点。",
                    anatomy: "肱骨侧位可显示肱骨侧位形态、鹰嘴窝等结构。",
                    designImage: "images/positions/design/humerus-lat-design.jpg",
                    xrayImage: "images/positions/xray/humerus-lat-xray.jpg"
                },
                {
                    name: "肘关节正位",
                    kv: 55,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准肘关节间隙",
                    coverage: "包括肱骨远端及尺桡骨近端",
                    technique: "患者坐于床旁，被检侧肘关节伸直，掌心向上，中心线垂直对准肘关节间隙。",
                    anatomy: "肘关节正位可显示肱骨远端、尺骨鹰嘴、桡骨头、肘关节间隙等结构。",
                    designImage: "images/positions/design/elbow-ap-design.jpg",
                    xrayImage: "images/positions/xray/elbow-ap-xray.jpg"
                },
                {
                    name: "肘关节侧位",
                    kv: 55,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准肘关节间隙",
                    coverage: "包括肱骨远端及尺桡骨近端",
                    technique: "患者坐于床旁，被检侧肘关节屈曲90度，拇指向上，中心线垂直对准肘关节间隙。",
                    anatomy: "肘关节侧位可显示肱骨远端、尺骨鹰嘴、桡骨头、冠突窝等结构。",
                    designImage: "images/positions/design/elbow-lat-design.jpg",
                    xrayImage: "images/positions/xray/elbow-lat-xray.jpg"
                },
                {
                    name: "尺桡骨正位",
                    kv: 55,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准前臂中点",
                    coverage: "包括肘关节至腕关节",
                    technique: "患者坐于床旁，被检侧前臂伸直，掌心向上，中心线垂直对准前臂中点。",
                    anatomy: "尺桡骨正位可显示尺骨、桡骨全长及上下尺桡关节。",
                    designImage: "images/positions/design/forearm-ap-design.jpg",
                    xrayImage: "images/positions/xray/forearm-ap-xray.jpg"
                },
                {
                    name: "尺桡骨侧位",
                    kv: 55,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准前臂中点",
                    coverage: "包括肘关节至腕关节",
                    technique: "患者坐于床旁，被检侧肘关节屈曲90度，前臂侧立，拇指向上，中心线垂直对准前臂中点。",
                    anatomy: "尺桡骨侧位可显示尺骨、桡骨侧位形态及相互关系。",
                    designImage: "images/positions/design/forearm-lat-design.jpg",
                    xrayImage: "images/positions/xray/forearm-lat-xray.jpg"
                },
                {
                    name: "腕关节正位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "垂直对准腕关节间隙",
                    coverage: "包括桡尺骨远端及掌骨近端",
                    technique: "患者坐于床旁，被检侧前臂伸直，掌心向下，中心线垂直对准腕关节间隙。",
                    anatomy: "腕关节正位可显示桡骨远端、尺骨远端、腕骨、掌骨基底等结构。",
                    designImage: "images/positions/design/wrist-ap-design.jpg",
                    xrayImage: "images/positions/xray/wrist-ap-xray.jpg"
                },
                {
                    name: "腕关节侧位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "垂直对准腕关节间隙",
                    coverage: "包括桡尺骨远端及掌骨近端",
                    technique: "患者坐于床旁，被检侧前臂侧立，拇指向前，中心线垂直对准腕关节间隙。",
                    anatomy: "腕关节侧位可显示腕骨侧位排列、桡尺骨远端侧位形态。",
                    designImage: "images/positions/design/wrist-lat-design.jpg",
                    xrayImage: "images/positions/xray/wrist-lat-xray.jpg"
                },
                {
                    name: "手正位",
                    kv: 50,
                    mas: 4,
                    sid: 100,
                    centerline: "垂直对准第三掌骨头",
                    coverage: "包括全部掌骨及指骨",
                    technique: "患者坐于床旁，被检侧手掌平放于探测器上，手指稍分开，中心线垂直对准第三掌骨头。",
                    anatomy: "手正位可显示掌骨、指骨、腕掌关节、掌指关节等结构。",
                    designImage: "images/positions/design/hand-ap-design.jpg",
                    xrayImage: "images/positions/xray/hand-ap-xray.jpg"
                },
                {
                    name: "手侧位",
                    kv: 50,
                    mas: 4,
                    sid: 100,
                    centerline: "垂直对准第二掌骨头",
                    coverage: "包括全部掌骨及指骨",
                    technique: "患者坐于床旁，被检侧手侧立，小指贴近探测器，中心线垂直对准第二掌骨头。",
                    anatomy: "手侧位可显示掌骨、指骨侧位排列及相互关系。",
                    designImage: "images/positions/design/hand-lat-design.jpg",
                    xrayImage: "images/positions/xray/hand-lat-xray.jpg"
                },
                {
                    name: "手斜位",
                    kv: 50,
                    mas: 4,
                    sid: 100,
                    centerline: "垂直对准第三掌骨头",
                    coverage: "包括全部掌骨及指骨",
                    technique: "患者坐于床旁，被检侧手掌旋转45度，中心线垂直对准第三掌骨头。",
                    anatomy: "手斜位可更清晰显示掌骨头、指骨基底及关节间隙。",
                    designImage: "images/positions/design/hand-oblique-design.jpg",
                    xrayImage: "images/positions/xray/hand-oblique-xray.jpg"
                }
            ],
            "lower-limb": [
                {
                    name: "足正位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "垂直对准第三跖骨基底",
                    coverage: "包括全部跖骨及趾骨",
                    technique: "患者坐于床旁，被检侧足底平放于探测器上，中心线垂直对准第三跖骨基底。",
                    anatomy: "足正位可显示跖骨、趾骨、跗骨及关节间隙。",
                    designImage: "images/positions/design/foot-ap-design.jpg",
                    xrayImage: "images/positions/xray/foot-ap-xray.jpg"
                },
                {
                    name: "足斜位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "垂直对准第三跖骨基底",
                    coverage: "包括全部跖骨及趾骨",
                    technique: "患者坐于床旁，被检侧足内旋45度，中心线垂直对准第三跖骨基底。",
                    anatomy: "足斜位可更清晰显示跗骨间关节、跖跗关节等结构。",
                    designImage: "images/positions/design/foot-oblique-design.jpg",
                    xrayImage: "images/positions/xray/foot-oblique-xray.jpg"
                },
                {
                    name: "踝关节正位",
                    kv: 60,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准内外踝连线中点",
                    coverage: "包括胫腓骨远端及距骨",
                    technique: "患者坐于床旁，被检侧下肢伸直，足尖向上并轻度内旋10-15度，中心线垂直对准内外踝连线中点。",
                    anatomy: "踝关节正位可显示胫腓骨远端、距骨、踝关节间隙等结构。",
                    designImage: "images/positions/design/ankle-ap-design.jpg",
                    xrayImage: "images/positions/xray/ankle-ap-xray.jpg"
                },
                {
                    name: "踝关节侧位",
                    kv: 60,
                    mas: 8,
                    sid: 100,
                    centerline: "垂直对准内踝",
                    coverage: "包括胫腓骨远端及距骨",
                    technique: "患者侧卧，被检侧外踝贴近探测器，中心线垂直对准内踝。",
                    anatomy: "踝关节侧位可显示胫骨远端、距骨、跟骨侧位形态及踝关节侧位关系。",
                    designImage: "images/positions/design/ankle-lat-design.jpg",
                    xrayImage: "images/positions/xray/ankle-lat-xray.jpg"
                },
                {
                    name: "胫腓骨正位",
                    kv: 65,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准小腿中点",
                    coverage: "包括膝关节至踝关节",
                    technique: "患者仰卧，被检侧下肢伸直，足尖向上，中心线垂直对准小腿中点。",
                    anatomy: "胫腓骨正位可显示胫骨、腓骨全长及上下胫腓关节。",
                    designImage: "images/positions/design/leg-ap-design.jpg",
                    xrayImage: "images/positions/xray/leg-ap-xray.jpg"
                },
                {
                    name: "胫腓骨侧位",
                    kv: 65,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准小腿中点",
                    coverage: "包括膝关节至踝关节",
                    technique: "患者侧卧，被检侧下肢伸直，中心线垂直对准小腿中点。",
                    anatomy: "胫腓骨侧位可显示胫骨、腓骨侧位形态及相互关系。",
                    designImage: "images/positions/design/leg-lat-design.jpg",
                    xrayImage: "images/positions/xray/leg-lat-xray.jpg"
                },
                {
                    name: "膝关节正位",
                    kv: 65,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准髌骨下缘",
                    coverage: "包括股骨远端及胫腓骨近端",
                    technique: "患者仰卧，被检侧下肢伸直，足尖向上，中心线垂直对准髌骨下缘。",
                    anatomy: "膝关节正位可显示股骨远端、胫骨近端、腓骨头、膝关节间隙等结构。",
                    designImage: "images/positions/design/knee-ap-design.jpg",
                    xrayImage: "images/positions/xray/knee-ap-xray.jpg"
                },
                {
                    name: "膝关节侧位",
                    kv: 65,
                    mas: 12,
                    sid: 100,
                    centerline: "垂直对准膝关节间隙",
                    coverage: "包括股骨远端及胫腓骨近端",
                    technique: "患者侧卧，被检侧膝关节屈曲20-30度，中心线垂直对准膝关节间隙。",
                    anatomy: "膝关节侧位可显示股骨髁、胫骨平台、髌骨、髌股关节等结构。",
                    designImage: "images/positions/design/knee-lat-design.jpg",
                    xrayImage: "images/positions/xray/knee-lat-xray.jpg"
                },
                {
                    name: "股骨正位",
                    kv: 70,
                    mas: 16,
                    sid: 100,
                    centerline: "垂直对准股骨中点",
                    coverage: "包括髋关节至膝关节",
                    technique: "患者仰卧，被检侧下肢伸直，足尖内旋15-20度，中心线垂直对准股骨中点。",
                    anatomy: "股骨正位可显示股骨全长、股骨头、股骨颈、大小转子等结构。",
                    designImage: "images/positions/design/femur-ap-design.jpg",
                    xrayImage: "images/positions/xray/femur-ap-xray.jpg"
                },
                {
                    name: "股骨侧位",
                    kv: 70,
                    mas: 16,
                    sid: 100,
                    centerline: "垂直对准股骨中点",
                    coverage: "包括髋关节至膝关节",
                    technique: "患者侧卧，被检侧下肢伸直，对侧下肢屈曲置于前方，中心线垂直对准股骨中点。",
                    anatomy: "股骨侧位可显示股骨侧位形态、股骨髁等结构。",
                    designImage: "images/positions/design/femur-lat-design.jpg",
                    xrayImage: "images/positions/xray/femur-lat-xray.jpg"
                },
                {
                    name: "跟骨正位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "向头侧倾斜30-40度，对准跟骨",
                    coverage: "跟骨",
                    technique: "患者仰卧，被检侧下肢伸直，足尖向上，中心线向头侧倾斜30-40度，对准跟骨。",
                    anatomy: "跟骨正位可显示跟骨体部、跟骨前突、跟骰关节等结构。",
                    designImage: "images/positions/design/calcaneus-ap-design.jpg",
                    xrayImage: "images/positions/xray/calcaneus-ap-xray.jpg"
                },
                {
                    name: "跟骨侧位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "垂直对准跟骨",
                    coverage: "跟骨",
                    technique: "患者侧卧，被检侧足外侧面贴近探测器，中心线垂直对准跟骨。",
                    anatomy: "跟骨侧位可显示跟骨侧位形态、跟骨结节、距下关节等结构。",
                    designImage: "images/positions/design/calcaneus-lat-design.jpg",
                    xrayImage: "images/positions/xray/calcaneus-lat-xray.jpg"
                },
                {
                    name: "跟骨轴位",
                    kv: 55,
                    mas: 6,
                    sid: 100,
                    centerline: "向足侧倾斜30-40度，对准跟骨",
                    coverage: "跟骨",
                    technique: "患者仰卧，被检侧踝关节极度背屈，中心线向足侧倾斜30-40度，对准跟骨。",
                    anatomy: "跟骨轴位可显示跟骨长轴形态、跟骨体部及跟骨结节。",
                    designImage: "images/positions/design/calcaneus-axial-design.jpg",
                    xrayImage: "images/positions/xray/calcaneus-axial-xray.jpg"
                }
            ]
        };

        // 初始化变量
        let currentRegion = 'head';
        let currentPosition = null;
        
        // DOM元素
        const positionsList = document.getElementById('positions-list');
        const positionDesign = document.getElementById('position-design');
        const xrayImage = document.getElementById('xray-image');
        const loading = document.getElementById('loading');
        const exposureBtn = document.getElementById('exposure-btn');
        const exposureSound = document.getElementById('exposure-sound');
        const statusText = document.getElementById('status-text');
        const techniqueText = document.getElementById('technique-text');
        const anatomyText = document.getElementById('anatomy-text');
        
        // 参数显示元素
        const kvValue = document.getElementById('kv-value');
        const masValue = document.getElementById('mas-value');
        const sidValue = document.getElementById('sid-value');
        const centerlineValue = document.getElementById('centerline-value');
        const coverageValue = document.getElementById('coverage-value');
        const displayKv = document.getElementById('display-kv');
        const displayMas = document.getElementById('display-mas');
        const displaySid = document.getElementById('display-sid');
        
        // 初始化界面
        function init() {
            console.log('🚀 DR模拟系统初始化 - 开发者：医影小白');
            // 添加区域按钮事件
            document.querySelectorAll('.region-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.region-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentRegion = this.getAttribute('data-region');
                    loadPositions(currentRegion);
                });
            });
            
            // 曝光按钮事件
            exposureBtn.addEventListener('click', performExposure);
            
            // 加载初始区域体位
            loadPositions(currentRegion);
            console.log('🎉 DR系统初始化完成 - 仅供学习使用');
        }
        
        // 加载体位列表
        function loadPositions(region) {
            positionsList.innerHTML = '';
            
            if (positionsData[region]) {
                positionsData[region].forEach((position, index) => {
                    const positionItem = document.createElement('div');
                    positionItem.className = 'position-item';
                    if (index === 0) {
                        positionItem.classList.add('active');
                        currentPosition = position;
                        updatePositionDetails(position);
                    }
                    positionItem.textContent = position.name;
                    positionItem.addEventListener('click', function() {
                        document.querySelectorAll('.position-item').forEach(item => item.classList.remove('active'));
                        this.classList.add('active');
                        currentPosition = position;
                        updatePositionDetails(position);
                    });
                    positionsList.appendChild(positionItem);
                });
            }
        }
        
        // 更新体位详情
        function updatePositionDetails(position) {
            // 更新参数显示
            kvValue.textContent = position.kv;
            masValue.textContent = position.mas;
            sidValue.textContent = position.sid + ' cm';
            centerlineValue.textContent = position.centerline;
            coverageValue.textContent = position.coverage;
            
            // 更新曝光参数显示
            displayKv.textContent = position.kv;
            displayMas.textContent = position.mas;
            displaySid.textContent = position.sid;
            
            // 更新摄影指导和解剖解释
            techniqueText.textContent = position.technique;
            anatomyText.textContent = position.anatomy;
            
            // 显示体位设计图像
            positionDesign.innerHTML = `<img src="${position.designImage}" alt="${position.name}体位设计" style="max-width:100%; max-height:100%;">`;
            positionDesign.style.display = 'block';
            xrayImage.style.display = 'none';
            
            // 预加载X光影像
            const img = new Image();
            img.src = position.xrayImage;
            
            // 更新状态
            statusText.textContent = `已选择: ${position.name} - 准备曝光`;
            
            // 重置曝光按钮
            exposureBtn.disabled = false;
        }
        
        // 执行曝光
        function performExposure() {
            if (!currentPosition) return;
            
            // 禁用曝光按钮
            exposureBtn.disabled = true;
            
            // 显示加载中
            loading.style.display = 'block';
            positionDesign.style.display = 'none';
            xrayImage.style.display = 'none';
            
            // 播放曝光声音
            exposureSound.play();
            
            // 更新状态
            statusText.textContent = `曝光中: ${currentPosition.name}...`;
            
            // 模拟曝光过程
            setTimeout(() => {
                // 隐藏加载中
                loading.style.display = 'none';
                
                // 显示X光影像
                xrayImage.src = currentPosition.xrayImage;
                xrayImage.style.display = 'block';
                
                // 更新状态
                statusText.textContent = `曝光完成: ${currentPosition.name}`;
                
                // 重新启用曝光按钮
                exposureBtn.disabled = false;
            }, 2000);
        }
        
        // 显示启动信息
        function showStartupInfo() {
            console.log('=========================================');
            console.log('🩺 DR模拟学习系统');
            console.log('👨‍⚕️ 开发者：医影小白');
            console.log('📚 用途：医学影像技术学习');
            console.log('⚠️  免责声明：仅供学习，非医疗诊断用途');
            console.log('=========================================');
        }
        
        // 初始化应用
        init();
    </script>
</body>
</html>
